<template>
  <div class="admin-top">
    <div v-if="list[0].status == 'admin'" class="blueHour">
      <!-- <h2>管理员界面</h2> -->
      <!-- <p>{{ list[0].status }}</p> -->
      <!-- 这里不要把所有的列的width都设置，要不然会出现空白的列，是由组件自动填充的 -->
      <div>
        <el-table :data="memberList" border style="width: 100%">
          <el-table-column
            prop="username"
            label="姓名"
            width="170"
            style="text-align: center; justify-content: center"
          >
          </el-table-column>
          <el-table-column prop="password" label="密码"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="remove(scope.row.username)"
                type="danger"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="data" border style="width: 100%">
          <el-table-column
            prop="discussionName"
            label="讨论主题"
            width="170"
            style="text-align: center; justify-content: center"
          >
          </el-table-column>
          <el-table-column prop="name" label="发起者"> </el-table-column>
          <el-table-column prop="content" label="内容"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="remove1(scope.row.discussionName)"
                type="danger"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="f1">
          <div v-for="discuss in data" :key="discuss.discussionName">
            <div class="discuss-content">
              <div>讨论主题:{{ discuss.discussionName }}</div>
              <div>发起者:{{ discuss.name }}</div>
              <div>讨论内容:{{ discuss.content }}</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- <div v-else>
      <p>请登录管理员账户</p>
    </div> -->
    <el-footer>
      <div class="header-container">
        <div class="header-left" @click="gitee">
          <svg
            t="1649494744692"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2518"
            width="20"
            height="20"
          >
            <path
              d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.312 25.312 0 0 0-25.28-25.312H417.184a189.632 189.632 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z"
              p-id="2519"
            ></path>
          </svg>
          支持项目
        </div>
        <div class="header-middle" @click="contact">
          <svg
            t="1649494380020"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1136"
            width="20"
            height="20"
          >
            <path
              d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
              p-id="1137"
            ></path>
          </svg>
          联系作者
        </div>
        <div class="header-right" @click="disclaimer">
          <i class="el-icon-warning-outline"></i>免责声明
        </div>
      </div>
      <div class="header-text">
        <p>该学习资源共享网站由黄炜俊、李映玲、刘思杰团队提供</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberList: [],
      activeIndex2: "7",
      data: [],
    };
  },

  created() {
    this.$http.get("admin").then((res) => {
      console.log(res.data);
      let member_info = res.data;
      this.memberList.push(...member_info);
      console.log(this.data);
    });
    this.$http.get("discuss").then((res) => {
      console.log(res.data);
      let data_info = res.data;
      this.data.push(...data_info);
      console.log(this.data);
    });
  },
  computed: {
    list() {
      return this.$store.state.list;
      // console.log(this.$store.state.list);
    },
  },
  methods: {
    //跳转登录页
    login() {
      this.$router.replace("/about");
    },
    //删除用户
    remove(option) {
      this.$http.delete(`admin/${option}`).then(() => {
        this.$message({
          message: "删除用户成功",
          type: "success",
        });
        this.$router.go(0);
      });
    },
    //删除评论
    remove1(option) {
      this.$http.delete(`admin1/${option}`).then(() => {
        this.$message({
          message: "删除评论成功",
          type: "success",
        });
        this.$router.go(0);
      });
    },
    //源码地址
    gitee() {
      window.location.href = "https://gitee.com/xiao_jun9999/studyshare";
    },
    //联系作者
    contact() {
      this.$router.push("contact");
    },
    //免责声明
    disclaimer() {
      this.$router.push("disclaimer");
    },
  },
};
</script>

<style>
/* 引入icon的样式 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* 底部样式 */
.el-footer {
  color: gray;
  background-color: #000;
}

.el-footer .header-container {
  display: flex;
  justify-content: center;
}
.el-footer .header-container div {
  margin-left: 40px;
}
/* 背景样式 */
.admin-top .blueHour {
  width: 100vw;
  height: 100vh;
  margin-top: -50px;
}
.admin-top .blueHour {
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(left, #7e898f 0%, #636c75 100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.55
          )
          100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.08
          )
          63%);
  background: linear-gradient(90deg, #7e898f 0%, #636c75 100%),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.08) 63%
    );
  background-blend-mode: multiply, screen;
}

.admin-top .darkAmber {
  padding-top: 60px;
  width: 50rem;
  height: 300px;
  /* background-image: -webkit-linear-gradient(top, #15140f 0%, #34312c 97%);
  background-image: linear-gradient(-180deg, #15140f 0%, #34312c 97%); */
}

.admin-main {
  background: #000;
}
</style>